
<template>
  <el-row>
    <el-col :span="24" style="height: 80vh">
      <CesiumMap ref="cesiumMap" :tileSet="tileSet"></CesiumMap>
    </el-col>
  </el-row>
</template>
    
  
<script>
import CesiumMap from "../cesiumMap/index.vue";
import * as Cesium from "cesium";
import { ref, watch } from "vue";
const cesiumMap = ref(null);
let viewer = ref(null);
export default {
  components: { CesiumMap },
  data() {
    return {
      tileSet: {

      }
    }
  },
  methods: {
    loadGltf: function () {








    },
    doTianditu: function () {
      let TOKEN_TIANDITU = "39c6ffb6b4ceb22a0dfad5975f58a495";
      viewer.imageryLayers.removeAll();
      viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=39c6ffb6b4ceb22a0dfad5975f58a495",
          layer: "tdtBasicLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
          maximumLevel: 18,
        })
      );

      viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url:
            "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" +
            TOKEN_TIANDITU,
          layer: "tdtAnnoLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
          show: true,
        })
      );
    },
  },
  setup() {
    return {
      cesiumMap,
    };
  },

  mounted() {
    viewer = cesiumMap.value.viewer;
    // 
    this.doTianditu();

    this.loadGltf();
  },
};
</script>
  
<style scoped></style>
  